<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline" size="mini">
      <el-form-item>
        <el-input v-model="memberQuery.email" placeholder="邮箱"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="memberQuery.mobile" placeholder="手机"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="memberQuery.nickname" placeholder="昵称"/>
      </el-form-item>

      <el-form-item label="注册时间">
        <el-date-picker
          v-model="memberQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      -
      <el-form-item>
        <el-date-picker
          v-model="memberQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">查询</el-button>
      <el-button type="default" icon="el-icon-refresh" size="small" @click="resetData()">清空</el-button>

    </el-form>

    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="头像" width="280">
        <template slot-scope="scope">
          <div class="d-flex">
            <div><img :src="scope.row.avatar" class="user-avatar"></div>
            <div class="ml-4">
              <div class="font-medium font-sans">{{scope.row.nickname}}</div>
              <div class="email font-sans">{{scope.row.mobile || scope.row.email}}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <!--
      <el-table-column prop="mobile" label="手机号" width="180"/>
      <el-table-column prop="email" label="邮箱" width="280"/>
      <el-table-column prop="nickname" label="昵称" />-->
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.isOnline">
              <div class="d-flex status" style="white-space: nowrap;">
                <i class="icon-online"></i>
                <span>&nbsp;在线</span>
                 &nbsp;&nbsp;<el-link @click="doChat(scope.row)" type="primary">发送消息</el-link>
              </div>
          </span>
          <span v-else>
            <div class="d-flex status">
              <i class="icon-offline"></i>
              <span>&nbsp;离线</span>
            </div>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.sex">{{ scope.row.sex===1?'男':'女' }}</span>
          <span v-else>未知</span>
        </template>

      </el-table-column>
      <el-table-column prop="age" label="年龄"/>

      <el-table-column prop="lastLoginTime" label="最后登录时间" sortable width="160"/>
      <el-table-column prop="gmtCreate" label="注册时间" sortable width="160"/>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-switch
            :value="!scope.row.isDisabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="启用"
            inactive-text="禁用"
            @change="showDisabledMember(scope.row.isDisabled,scope.row.id)"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      background
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />

    <el-dialog
      title="提示"
      :visible.sync="dialogLockVisible"
      width="30%">
      <span>{{dialogLockText}}</span>
      <div v-if="isShowDisReason">
        <el-checkbox-group style="margin: 20px 0" v-model="checkList" @change="selectCheckList">
          <el-checkbox label="评论违规"></el-checkbox>
          <el-checkbox label="头像违规"></el-checkbox>
          <el-checkbox label="恶意操作"></el-checkbox>
        </el-checkbox-group>

        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="disableReason">
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogLockVisible = false">取 消</el-button>
    <el-button type="primary" @click="disabledMember()">确 定</el-button>
  </span>
    </el-dialog>

    <el-drawer
      :with-header="false"
      :visible.sync="drawer"
      direction="rtl"
      :size="chatBoxWith"
    >
      <!--left-->
      <div class="people-list fl">
        <div class="search">
          <input type="text" placeholder="search">
        </div>
        <ul class="list">
          <li class="clearfix fix"
              :class="{'action':user.id===chat.toUser.id}"
              v-for="(user,index) in onLineUser"
              @click="chat.toUser=user">
            <img :src="user.avatar" class="user-avatar fl" alt="">
            <div class="about ml-4 fl">
              <div class="name">{{user.nickname}}</div>
              <div class="status d-flex"><i class="icon-online"></i><span class="ml-5">online</span></div>
            </div>
          </li>
        </ul>
      </div>
      <!--right-->
      <div class="chat-box">
        <div class="chat-header clearfix">
          <img :src="chat.toUser.avatar" alt="" class="chat-avatar fl">
          <div class="chat-about fl">
            <div class="chat-with">{{chat.toUser.nickname}}</div>
            <div class="chat-num-messages">already 1 902 messages</div>
          </div>
        </div>
        <!--聊天记录-->
        <div id="history" class="chat-history">
          <div class="conversation-start">
            <span> 以下为最新消息 </span>
          </div>
          <div class="bubble" :class="item.isAdmin?'me':'you'" v-for="(item,index) in chat.list.get(chat.toUser.id)">
            {{item.data}}
          </div>
          <!--<ul>
            <li v-for="(item,index) in chat.list.get(chat.toUser.id)">{{item.data}}</li>
          </ul>-->
        </div>
        <div class="chat-from">
          <el-input v-model="content" placeholder="请输入内容"></el-input>
          <el-button type="primary" icon="el-icon-search" size="small" @click="doSend(chat.toUser.id)">发送</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        listLoading: true, // 是否显示loading信息
        list: null, //查询后返回数据
        page: 1, //当前页
        limit: 4, //每页记录数
        total: 0, //总记录数
        memberQuery: {},//条件封装对象
        onLineIds: [],
        chat: {
          toUser: {},
          list: new Map()
          /*list:{
            "1406184630121488385":[{isAdmin:true,data:"初始化"},{isAdmin:true,data:"初始化"}],
            "1406481978982707202":[{isAdmin:true,data:"初始化111"},{isAdmin:true,data:"初始化333"}]
          }*/
        },
        onLineUser: [],//在线用户
        drawer: false,
        content: '',
        // screenWidth: '',
        chatBoxWith: '50%',

        dialogLockVisible:false,
        dialogLockText:"",
        isShowDisReason:false,
        checkList:[],
        disableReason:"",
        disMemberId:''
      }
    },
    created() {
      //this.getOnline()
    },
    mounted() {
      this.getList()
      let tempWidth = 0;
      window.onresize = () => {
        return (() => {
          tempWidth = 750 / document.body.clientWidth
          // console.log(tempWidth)
          if (tempWidth < 0.9) {
            this.chatBoxWith = tempWidth * 100 + '0%'
          }
        })();
      };
    },
    methods: {
       getOnline() {
        return this.api({
          url: `/member/getOnline`,
          method: 'get'
        }).then(resp => {
          this.onLineIds = resp
        })
      },
      //获取列表
      getList(page = 1) {
        //查询列表
        if (!this.hasPerm('member:list')) {
          return
        }
        this.page = page
        this.api({
          url: `/member/pageListMemberCondition/${this.page}/${this.limit}`,
          method: "post",
          data: this.memberQuery
        }).then(data => {
          this.api({
            url: `/member/getOnline`,
            method: 'get'
          }).then(res=>{
            this.onLineIds=res
            data.list.forEach(item => {
              //console.log("h1",this.onLineIds.findIndex(id=>id===item.id)!==-1)
              //console.log("h2",this.onLineUser.findIndex(s=>s.id === item.id) === -1)
              if (this.onLineIds.findIndex(id => id === item.id) !== -1) {//所有在线用户id列表里有该用户
                item.isOnline = true
                if (this.onLineUser.findIndex(s => s.id === item.id) === -1) {//在线用户list里不存在该用户
                  this.onLineUser.push(item)
                }
              }

            })
            this.list = data.list //列表
            this.total = data.totalCount //总数
            if (this.onLineIds[0]) {
              let v1 = []
              v1.push({isAdmin: true, data: "初始化"})
              v1.push({isAdmin: false, data: "初始化..."})
              this.chat.list.set(this.onLineIds[0], v1)
            }
            this.listLoading = false
          })
        })
      },
      doChat(user) {
        this.chat.toUser = user
        this.drawer = true
      },
      scrollChat() {
        let e = document.getElementById("history")
        if (e) e.scrollTop = e.scrollHeight;
      },
      doSend(id) {

        this.api({
          url: `/member/sendMsg`,
          method: 'post',
          data: {
            id: id,
            msg: this.content
          }
        }).then(data => {
          let msg = {
            isAdmin: true,
            data: this.content
          }
          this.content = ''
          this.chat.list.get(id).push(msg)
          this.scrollChat()
          this.$message.success("发送成功")
        }).catch(err => {
          this.$message.error("发送失败")

        })
      },
      //重置查询条件
      resetData() {
        this.memberQuery = {}
        this.getList()
      },
      showDisabledMember(isDis, id){
        this.dialogLockVisible=true
         this.dialogLockText=isDis ? '确定解除冻结该用户？' : '确定冻结该用户？冻结后该用户无法登录';
         this.isShowDisReason=!isDis;
         this.disMemberId=id
      },
      disabledMember() {
        console.log(this.disableReason)
         this.api({
            url: `/member/disabledMember/${this.disMemberId}`,
            method: "post",
            data: {disableReason:this.disableReason} ,
          }).then(() => {
            this.dialogLockVisible=false
          this.getList(this.page)

        })
      },
      selectCheckList(){
         this.disableReason=this.checkList.toString()
      }
      /*//删除
      removeDataById(id) {
        // debugger
        //MessageBox 在utils/request.js中已引用
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.api({
            url: `/teacher/${id}`,
            method: "delete",
          })
        }).then(() => {
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch((response) => { // 失败
          if (response === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          } else {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          }
        })
      },*/


    }

  }
</script>

<style scoped>
  ul {
    list-style: none;
    padding: 0;
  }

  .people-list {
    width: 30%;
    background: #444753;
    min-width: 75px;
  }

  .people-list .search {
    padding: 20px;
  }

  .search input::-webkit-input-placeholder { /* WebKit browsers */
    color: #fff;
  }

  .people-list input {
    border-radius: 3px;
    border: none;
    padding: 14px;
    color: white;
    background: #6A6C75;
    width: 90%;
    font-size: 14px;
  }

  .people-list ul {
    height: 770px;
  }

  .fix {
    display: flex;
  }

  .people-list ul li {
    padding: 8px 20px;
  }

  .people-list ul li:hover {
    background: #646464
  }

  .people-list ul li.action {
    background: #585858;
  }

  .people-list img {
    border-radius: 50%;
  }

  .status {
    font-size: 12px;
    color: #909399;
  }

  .icon-online {
    display: block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg t='1645201262927' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='8091' width='12' height='12'%3E%3Cpath d='M0 512c0 282.624 229.376 512 512 512s512-229.376 512-512S794.624 0 512 0 0 229.376 0 512z' fill='%231afa29' opacity='.2' p-id='8092'%3E%3C/path%3E%3Cpath d='M272.896 512c0 132.096 107.008 239.104 239.104 239.104S751.104 644.096 751.104 512 644.096 272.896 512 272.896 272.896 379.904 272.896 512z' fill='%231afa29' p-id='8093'%3E%3C/path%3E%3C/svg%3E");
  }

  .icon-offline {
    display: block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg t='1645279220649' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2613' width='12' height='12'%3E%3Cpath d='M0 512c0 282.624 229.376 512 512 512s512-229.376 512-512S794.624 0 512 0 0 229.376 0 512z' fill='%23fc563c' opacity='.2' p-id='2614'%3E%3C/path%3E%3Cpath d='M272.896 512c0 132.096 107.008 239.104 239.104 239.104S751.104 644.096 751.104 512 644.096 272.896 512 272.896 272.896 379.904 272.896 512z' fill='%23fc563c' p-id='2615' style=' color: %23fc563c;%0A'%3E%3C/path%3E%3C/svg%3E");
  }

  .about {
    overflow: hidden;
    color: #fff;
  }

  .about span {
    font-size: 13px;
    padding: 5px 0;
    color: #ccc;
  }

  .chat-box {
    width: 70%;
    height: 50%;
    float: right;
    padding: 0 30px;
  }

  .chat-box .chat-header {
    padding: 20px;
    border-bottom: 2px solid white;
  }

  .chat-box .chat-header .chat-about {
    padding-left: 10px;
    margin-top: 6px;
  }

  .chat-box .chat-header .chat-with {
    font-weight: bold;
    font-size: 16px;
  }

  .chat-box .chat-header .chat-num-messages {
    color: #92959E;
  }

  .chat-history {
    display: flex;
    /*padding: 30px 30px 20px;
    border-bottom: 2px solid white;
    overflow-y: scroll;
    height: 500px;*/
    position: relative;
    overflow: hidden;
    padding: 0 35px 92px;
    border-width: 1px 1px 1px 0;
    border-style: solid;
    border-color: #e6e6e6;
    height: calc(100% - 48px);
    overflow-y: scroll;
    /*justify-content: flex-end;*/
    flex-direction: column;
  }

  .conversation-start {
    position: relative;
    width: 100%;
    margin-bottom: 27px;
    text-align: center;
  }

  .conversation-start span {
    font-size: 14px;
    display: inline-block;
    color: #999;
  }

  .conversation-start span:before, .conversation-start span:after {
    position: absolute;
    top: 10px;
    display: inline-block;
    width: 30%;
    height: 1px;
    content: "";
    background-color: #999;
  }

  .conversation-start span:before {
    left: 0;
  }

  .conversation-start span:after {
    right: 0;
  }

  .chat-history .bubble:nth-of-type(2) {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
  }

  .chat-history .bubble {
    transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
  }

  .bubble.you {
    float: left;
    color: #fff;
    background-color: #00b0ff;
    align-self: flex-start;
    -webkit-animation-name: slideFromLeft;
    animation-name: slideFromLeft;
  }

  .bubble {
    font-size: 16px;
    position: relative;
    display: inline-block;
    clear: both;
    margin-bottom: 8px;
    padding: 13px 14px;
    vertical-align: top;
    border-radius: 5px;
  }

  .bubble.you:before {
    left: -3px;
    background-color: #00b0ff;
  }

  .bubble:before {
    position: absolute;
    top: 19px;
    display: block;
    width: 8px;
    height: 6px;
    content: " ";
    transform: rotate(29deg) skew(-35deg);
  }

  .chat-history .bubble:nth-of-type(4) {
    animation-duration: 0.6s;
  }

  .chat-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .bubble.me {
    float: right;
    color: #1a1a1a;
    background-color: #eceff1;
    align-self: flex-end;
    -webkit-animation-name: slideFromRight;
    animation-name: slideFromRight;
  }

  .bubble.me:before {
    right: -3px;
    background-color: #eceff1;
  }

  .clearfix {
    clear: both;
  }

  .fl {
    float: left;
  }
  .chat-from {
    display: flex;
    margin: 20px 0;
  }

</style>
